<template>
  <div>
    <div class="interest-box">
      <div class="title">尊享六大权益</div>
      <ul class="member-list">
        <li v-for="(item, index) in list" :key="index" class="list">
          <img :src="item.icon" alt="">
          <h3>{{item.title}}</h3>
          <p>{{item.slogan}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {title: '会员标识',slogan: '会员专属头衔标识',icon: require('../../../assets/img/member/ic_member.png')},
        {title: '靓丽昵称',slogan: '会员专属金色昵称',icon: require('../../../assets/img/member/ic_crown.png')},
        {title: '商城福利',slogan: '积分商城兑换+2次',icon: require('../../../assets/img/member/ic_mall.png')},
        {title: '交易福利',slogan: '出售小号手续费减少到3%',icon: require('../../../assets/img/member/ic_coupon.png')},
      ],
    }
  }
}
</script>

<style scoped>
h3, p {
  margin: 0;
}
.interest-box {
  box-sizing: border-box;
  padding: .4rem 0;
  margin-top: .266667rem;
  width: 10rem;
  height: 6.586667rem;
  background: #FFFFFF;
}

.member-list {
  margin-top: .186667rem;
  width: 10rem;
  height: 5.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}

.list {
  box-sizing: border-box;
  width: 3.333333rem;
  height: 2.4rem;
  /* padding: 0 .4rem; */
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  align-items: center;
}

.list img {
  width: .96rem;
  height: .96rem;
}

.list h3 {
  font-size: .32rem;
  font-weight: bold;
  color: #222222;
  line-height: .44rem;
  margin-top: .133333rem;
}

.list p {
  font-size: .24rem;
  font-weight: 500;
  color: #999999;
  text-align: center;
  line-height: .293333rem;
  margin-top: .026667rem;
}

.title {
  margin-left: .4rem;
  position: relative;
  font-size: .48rem;
  font-weight: 800;
  line-height: .666667rem;
  color: #222222;
  text-indent: .213333rem;
}

.title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: .08rem;
  height: .4rem;
  background: #222222;
  border-radius: .04rem;
}
</style>